iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ系列 第 2

Day02 - 單一元件檔你好 Single Component File 初見面

  • 分享至 

  • xImage
  •  

今天一樣跟著網路上的大神 重新認識 Vue.js | Kuro Hsu 3-2 Vue SFC 單一元件檔 學習 Vue

打開昨天建立好的 Vue Cli Project 後,打開 src (大神說這裡是存原始碼的地方),這個 src 裡面有一位 App.vue 檔,他就是今天的單一元件代表

單一元件檔主要可以乘載

# html
<template></template>

# js
<script></script>

# css
<style></style>

比較特別的是 style 可以透過加寫 scopeed 來避免該 SFC 樣式套到其他載入該 SFC 的元件

<style scope>
</style>

如果想要讓載入的子元內的特定選擇器標籤件繼承父元件的標籤樣式

<style scope>
    ::v-deep(selector) {
    }
</style>

今天的卡卡筆記如果上述理解有誤,在麻煩大家提醒了,感恩的心(っಠ‿ಠ)っ


上一篇
Day01 - Vue3 環境設置 Vue CLI 幫我準備手術室卡關筆記
下一篇
Day03 - 一邊動手修改 Vue CLI 建立的專案一邊複習 Vue 指令與資料夾結構
系列文
Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言